<!--
 * @Author: 毕晨曦 
 * @Date: 2024-07-28 20:43:39
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-08-01 21:44:39
 * @FilePath: /xing-fu-da-zi-weapp/src/pages/message/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="content">
    <scroll-view
      v-if="recvId && chatStore.data && chatStore.data[recvId]"
      class="scroll-box"
      scroll-y="true"
      :scroll-top="scrollTopHeight"
      scroll-with-animation="true"
    >
      <view
        v-for="(msgInfo, idx) in chatStore.data[recvId]"
        :key="idx"
        ref="messageRef"
      >
        <message-item
          :name="msgInfo.content"
          :text="msgInfo.content"
          :time="msgInfo.createTime"
          :sendId="msgInfo.sendId"
        />
      </view>
      <div style="height: 420rpx"></div>
    </scroll-view>
    <div
      style="
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        height: 180px;
        background: white;
        padding: 12rpx;
      "
    >
      <u-input
        :adjust-position="false"
        style="
          height: 140rpx;
          width: 100%;
          border: 1px solid #ddd;
          padding: 12rpx;
        "
        type="text"
        class="content"
        id="input"
        v-model="content"
        :confirm-type="'send'"
        :confirm-hold="true"
        placeholder-style="color:#DDD;"
        :cursor-spacing="6"
        @confirm="handleClick"
        :placeholder="'点击请输入消息'"
      />
      <u-button text="发送" color="#81d8d0" @click="handleClick"></u-button>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import * as Api from "@/api/im";
import * as wsApi from "@/utils/wssocket";
import { onMounted } from "vue";
import MessageItem from "@/components/messageItem/index.vue";
import { userChat } from "@/store/chat";
import { nextTick } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { watch } from "vue";

const chatStore = userChat();
const title = ref("Hello");
const token = uni.getStorageSync("token");
const userInfo = uni.getStorageSync("userInfo");

const recvId = ref("");

const content = ref("");

const scrollTopHeight = ref(500);

onLoad((option) => {
  console.log("option", option);
  if (!option) return;
  console.log("option", option.id);
  recvId.value = option.id;
});

watchEffect(() => {
  if (chatStore.data[recvId.value]) {
    nextTick(() => {
      uni.pageScrollTo({
        scrollTop: 2000000, //滚动到页面的目标位置（单位px）
        duration: 0, //滚动动画的时长，默认300ms，单位 ms
      });
    });
  }
});

function handleClick() {
  Api.sendMeessage({
    content: content.value,
    type: "1",
    recvId: recvId.value,
  });

  const id = Math.random() * 1000000000000000000;
  chatStore.setMessages({
    content: content.value,
    type: 1,
    sendId: userInfo.id,
    recvId: recvId.value,
    id,
    sendTime: new Date().getTime(),
    status: 1,
  });
  nextTick(() => {
    uni.pageScrollTo({
      scrollTop: 2000000, //滚动到页面的目标位置（单位px）
      duration: 0, //滚动动画的时长，默认300ms，单位 ms
    });
  });
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100rpx;
}
</style>
